<template>
	<view class="uni-pay">
		<!-- 手机版收银台弹窗开始 -->
		<uni-popup ref="payPopup" type="bottom" :safe-area="false">
			<view class="mobile-pay-popup" :style="'min-height: '+height+';'">
				<view class="mobile-pay-popup-title">收银台</view>
				<view class="mobile-pay-popup-amount-box">
					<view>待支付金额：</view>
					<!-- 是否全部打折 -->
					<strong v-if="!config.isDiscount">
						<view class="mobile-pay-popup-amount" v-if="userInfo?.vipPower?.vip_name=='普通会员'">
							{{ (Number(options.total_fee)).toFixed(2)||0.00}}
						</view>
						<view class="priceStyleContent priceStyleContent_div" v-else>
							<view class="priceStyleContent_left">
								{{ (Number(options.total_fee)).toFixed(2)||0.00 }}
							</view>
							<view class="priceStyleContent_center priceStyleContent_div">
							</view>
							<view class="priceStyleContent_right priceStyleContent_div">
								{{ (Number(options.total_price)).toFixed(2)||0.00 }}
							</view>
						</view>
					</strong>
					<strong v-else>
						<view class="mobile-pay-popup-amount" v-if="options?.total_price==''||!options?.total_price">
							{{ (Number(options.total_fee)).toFixed(2)}}
						</view>
						<view class="priceStyleContent priceStyleContent_div" v-else>
							<view class="priceStyleContent_left">
								{{ (Number(options.total_fee)).toFixed(2)||0.00 }}
							</view>
							<view class="priceStyleContent_center priceStyleContent_div">
							</view>
							<view class="priceStyleContent_right priceStyleContent_div">
								{{ (Number(options.total_price)).toFixed(2)||0.00 }}
							</view>
						</view>
					</strong>
				</view>
				<view class="mobile-pay-popup-provider-list">
					<uni-list style="padding-bottom: 100rpx;">
						<!-- #ifdef MP-ALIPAY || H5 || APP -->
						<uni-list-item v-if="currentProviders?.indexOf('topup_balance') > -1"
							:thumb="images?.topup_balance" title="充值余额"
							@click="createAccount({ provider: 'topup_balance' })" clickable link>
							<template v-slot:footer>
								<view style="display: flex;align-items: center;color: #bbbbbb;">
									{{userInfo?.money?.topup_balance||0}}
								</view>
							</template>
						</uni-list-item>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY || H5 || APP -->
						<uni-list-item v-if="currentProviders?.indexOf('income_balance') > -1"
							:thumb="images.topup_balance" title="收入余额"
							@click="createAccount({ provider: 'income_balance' })" clickable link>
							<template v-slot:footer>
								<view style="display: flex;align-items: center;color: #bbbbbb;">
									{{userInfo?.money?.income_balance||0}}
								</view>
							</template>
						</uni-list-item>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY || H5 || APP -->
						<uni-list-item
							v-if="currentProviders?.indexOf('coupon') > -1&&(options?.custom?.couponType==1||options?.custom?.couponType==0)"
							:thumb="images.coupon" :title="options?.custom?.couponType==1?'刷新卡':'置顶卡'"
							@click="createAccount({ provider: 'coupon' })" clickable link>
							<template v-slot:footer>
								<view style="display: flex;align-items: center;color: #bbbbbb;">
									<!-- {{userInfo?.money?.coupon?userInfo?.money?.coupon?.filter((x)=>x.couponType==1).length:""}} -->
									{{options?.custom?.couponType==1?refreshNum:stickyNum}}
								</view>
							</template> 	
						</uni-list-item>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN || H5 || APP -->
						<uni-list-item v-if="currentProviders?.indexOf('wxpay') > -1" :thumb="images.wxpay" title="微信支付"
							@click="createPayment({ provider: 'wxpay' })" clickable link></uni-list-item>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY || H5 || APP -->
						<uni-list-item v-if="currentProviders?.indexOf('alipay') > -1" :thumb="images.alipay" title="支付宝"
							@click="createPayment({ provider: 'alipay' })" clickable link></uni-list-item>
						<view class="line"></view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN || H5 || APP -->
						<uni-list-item v-if="currentProviders?.indexOf('auto_wxQR') > -1" :thumb="images.wxpay" title="微信扫码"
							@click="createPayment({ provider: 'auto_wxQR'})" clickable link></uni-list-item>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY || H5 || APP -->
						<uni-list-item v-if="currentProviders?.indexOf('auto_payQR') > -1" :thumb="images.alipay" title="支付宝扫码"
							@click="createPayment({ provider: 'auto_payQR' })" clickable link></uni-list-item>
						<view class="line"></view>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY || H5 || APP -->
						<uni-list-item :thumb="images.kefu" title="联系客服充值" @click="createKf" clickable
							link></uni-list-item>
						<view class="line"></view>
						<!-- #endif -->
					</uni-list>
				</view>
			</view>
		</uni-popup>
		<!-- 手机版收银台弹窗结束 -->

		<!-- 二维码支付弹窗开始 -->
		<view class="pay-qrcode-popup" v-if="vkPay.status < 2 && vkPay.codeUrl">
			<view class="pay-qrcode-popup-mask" @click="cancelPay"></view>
			<view class="pay-qrcode-popup-content">
				<image v-if="vkPay.qrcodeImage" :src="vkPay.qrcodeImage" class="pay-qrcode-popup-image"></image>
				<vk-uni-qrcode v-else :text="vkPay.codeUrl" :size="450"></vk-uni-qrcode>
				<view class="pay-qrcode-popup-info">
					<view>
						<text class="pay-qrcode-popup-info-fee">{{ (options.total_fee).toFixed(2) }}</text>
						<text>元</text>
					</view>
					<view v-if="options.provider == 'wxpay'">请用微信扫码支付</view>
					<view v-else-if="options.provider == 'alipay'">请用支付宝扫码支付</view>
				</view>
				<button v-if="vkPay.status == 1" type="primary" @click="queryPayment">我已完成支付</button>
				<view class="pay-confirm-popup-cancel" @click="cancelPay">暂不支付</view>
			</view>
		</view>
		<!-- 二维码支付弹窗结束 -->

		<!-- 外部浏览器H5支付弹窗确认开始 -->
		<view class="pay-confirm-popup" v-if="vkPay.confirmShow">
			<view class="pay-confirm-popup-content">
				<view class="pay-confirm-popup-title">请确认支付是否已完成</view>
				<view><button type="primary" @click="queryPayment">已完成支付</button></view>
				<view class="pay-confirm-popup-refresh"><button type="default"
						@click="afreshPayment">支付遇到问题，重新支付</button></view>
				<view class="pay-confirm-popup-cancel" @click="vkPay.confirmShow = false">暂不支付</view>
			</view>
		</view>
		<!-- 外部浏览器H5支付弹窗确认结束 -->


		<!-- vue2版本的支付组件开始 -->
		<!-- #ifndef VUE3 -->
		<vk-uni-pay ref="pay" :status.sync="vkPay.status" :code-url.sync="vkPay.codeUrl"
			:qrcode-image.sync="vkPay.qrcodeImage" :query-payment-action="vkPay.queryPaymentAction"
			:page-show="vkPay.pageShow" :auto-get-openid="vkPay.autoGetOpenid" :polling="vkPay.polling"
			:return-url="vkPay.returnUrl" :await-notify="vkPay.awaitNotify"
			:pay-order-info="vkPay.payOrderInfo"></vk-uni-pay>
		<!-- #endif -->
		<!-- vue2版本的支付组件结束 -->

		<!-- vue3版本的支付组件开始 -->
		<!-- #ifdef VUE3 -->
		<vk-uni-pay ref="pay" v-model:status="vkPay.status" v-model:codeUrl="vkPay.codeUrl"
			v-model:qrcodeImage="vkPay.qrcodeImage" :query-payment-action="vkPay.queryPaymentAction"
			:page-show="vkPay.pageShow" :auto-get-openid="vkPay.autoGetOpenid" :polling="vkPay.polling"
			:return-url="vkPay.returnUrl" :await-notify="vkPay.awaitNotify"
			:pay-order-info="vkPay.payOrderInfo"></vk-uni-pay>
		<!-- #endif -->
		<!-- vue3版本的支付组件结束 -->

		<!-- 客服弹窗 -->
		<fui-modal :buttons="[]" width="600" :zIndex="999" @cancel="CustomerShow=false" :maskClosable="true"
			:show="CustomerShow">
			<image show-menu-by-longpress="true" @click="bigImg(config?.topup_reception)"
				style="width: 400rpx;margin-top: 25rpx;" :src="config?.topup_reception" mode="widthFix"></image>
			<!-- #ifdef APP-PLUS -->
			<view style="display: flex;justify-content: space-between;width: 80%;">
				<fui-button @click="twocode(config?.topup_reception)" text="识别二维码" width="200rpx" height="72rpx" :size="28"
					radius="36rpx" background="#F1F4FA" color="#000" erWidth="0" :margin="['24rpx','0','24rpx']">
				</fui-button>
				<fui-button @click="saveCode(config?.topup_reception)" text="保存二维码" width="200rpx" height="72rpx" :size="28"
					radius="36rpx" background="#465CFF" color="#fff" borderWidth="0" :margin="['24rpx','0','24rpx']">
				</fui-button>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<fui-button @click="saveCode(config?.reception)" text="保存二维码" width="200rpx" height="72rpx" :size="28"
				radius="36rpx" background="#465CFF" color="#fff" borderWidth="0" :margin="['24rpx','0','24rpx']">
			</fui-button>
			<!-- #endif -->
		</fui-modal>
		<fui-loading zIndex="999" v-if="loading" :isFixed="true" srcCol="/static/images/component/loading_white.png"
			text="正在加载..."></fui-loading>
	</view>
</template>

<script setup>
	import {parseCode} from '@/utils/index.js'
	import {ConfigStore} from '@/store/modules/config.js'
	const config = computed(() => (ConfigStore().config))
	import {ref,computed,onMounted} from "vue"
	import {usePay} from "@/hooks/usePay.js"
	const props = defineProps({
		/**
		 * 支付成功后，点击查看订单按钮时跳转的页面地址
		 */
		returnUrl: {
			Type: String,
			default: ""
		},
		/**
		 * 支付结果页主色调，默认支付宝小程序为#108ee9，其他端均为#01be6e
		 * 建议：绿色系 #01be6e 蓝色系 #108ee9 咖啡色 #816a4e 粉红 #fe4070 橙黄 #ffac0c 橘黄 #ff7100
		 */
		mainColor: {
			Type: String,
			default: ""
		},
		/**
		 * 收银台高度（默认70vh）
		 */
		height: {
			Type: [String],
			default: "40vh"
		},
		/**
		 * 支付方式（默认70vh）
		 */
		payWay: {
			Type: [String, Array],
			// 默认使用收入余额，充值余额,卡包
			default: ['income_balance', 'topup_balance', 'coupon']
		}
	})
	const CustomerShow = ref(false)
	const createKf = () => {
		CustomerShow.value = true
		payPopup.value.close();
	}
	const twocode = (e) => {
		parseCode(e)
	}
	//保存到相册
	const saveCode = (e) => {
		// #ifdef APP-PLUS
		uni.saveImageToPhotosAlbum({
			filePath: e,
			success: function() {
				uni.fui.toast('成功保存到系统相册中')
			}
		});
		// #endif
		// #ifdef H5
		uni.downloadFile({
			url: e,
			success: (res) => {
				//创建一个a标签
				var link = document.createElement('a')
				//把a标签的href属性赋值到生成好了的url
				link.href = res.tempFilePath
				//通过a标签的download属性修改下载图片的名字
				link.download = '邀请好友.png'
				//让a标签的click函数，直接下载图片
				link.click()
			},fail(err){
				uni.fui.toast('请截图或复制链接')
			}
		})
		// #endif
	}
	//预览图片
	const bigImg = (e) => {
		uni.previewImage({
			urls: [e],
			longPressActions: {
				itemList: ['保存图片', '识别二维码'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if (data.tapIndex == 0) {
						plus.nativeUI.closePreviewImage();
						//保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: e,
							success: function() {
								uni.showToast({
									title: '成功保存到系统相册中',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						parseCode(e)
					}
				},
				fail: function(err) {

				}
			}
		});
	}
	const payPopup = ref(null)
	const pay = ref(null)
	const {
		userInfo,
		vkPay,
		options,
		images,
		currentProviders,
		open,
		createPayment,
		queryPayment,
		afreshPayment,
		cancelPay,
		createAccount,
		loading,
		refreshNum,
		stickyNum
	} = usePay(pay, payPopup, props)

	defineExpose({
		open,
		createPayment,
		queryPayment,
		afreshPayment
	})
</script>

<style lang="scss" scoped>
	.line {
		position: relative;
	}

	.line::after {
		content: '';
		width: 100%;
		height: 1rpx;
		background-color: #181818;
		position: absolute;
		left: 0;
		top: 0;
		transform: scaleY(0.1);
	}

	.uni-pay {
		--bgcolor: #f3f3f3;
	}

	/* 手机版收银台弹窗开始 */
	.mobile-pay-popup {
		min-height: 70vh;
		background-color: var(--bgcolor);
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;

		.mobile-pay-popup-title {
			background-color: #ffffff;
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
			padding: 20rpx;
		}

		.mobile-pay-popup-amount-box {
			background-color: #ffffff;
			padding: 30rpx;

			.mobile-pay-popup-amount {
				color: #e43d33;
				font-size: 60rpx;
				margin-top: 20rpx;
			}
		}

		.mobile-pay-popup-provider-list {
			background-color: #ffffff;
			margin-top: 20rpx;
		}
	}

	/* 手机版收银台弹窗结束 */

	/* 二维码支付弹窗开始 */
	.qrcode-popup-content {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx;
		box-sizing: border-box;
		text-align: center;

		.qrcode-image {
			width: 450rpx;
			height: 450rpx;
		}

		.qrcode-popup-info {
			text-align: center;
			padding: 20rpx;

			.qrcode-popup-info-fee {
				color: red;
				font-size: 60rpx;
				font-weight: bold;
			}
		}

		.qrcode-popup-cancel {
			margin-top: 20rpx;
			text-align: center;
		}
	}

	/* 二维码支付弹窗结束 */
	/* 外部浏览器H5支付弹窗确认开始 */
	.pay-confirm-popup {
		position: fixed;
		z-index: 2;
		width: 100vw;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);

		.pay-confirm-popup-content {
			width: 550rpx;
			margin: 50% auto 0 auto;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 40rpx;

			.pay-confirm-popup-title {
				text-align: center;
				padding: 20rpx 0;
				margin-bottom: 30rpx;
			}

			.pay-confirm-popup-refresh {
				margin-top: 20rpx;
			}

			.pay-confirm-popup-cancel {
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}

	/* 外部浏览器H5支付弹窗确认结束 */


	/* 二维码支付弹窗开始 */
	.pay-qrcode-popup {
		position: fixed;
		z-index: 9999;
		width: 100vw;
		top: 0;
		bottom: 0;
		top: 0;
		right: 0;

		.pay-qrcode-popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.pay-qrcode-popup-content {
			position: relative;
			width: 500rpx;
			margin: 40% auto 0 auto;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 40rpx;
			box-sizing: content-box;
			text-align: center;

			.pay-qrcode-popup-info {
				text-align: center;
				padding: 20rpx;

				.pay-qrcode-popup-info-fee {
					color: red;
					font-size: 60rpx;
					font-weight: bold;
				}
			}

			.pay-qrcode-popup-image {
				width: 450rpx;
				height: 450rpx;
			}

			.pay-confirm-popup-cancel {
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}

	/* 二维码支付弹窗结束 */










	.priceStyleContent {
		margin-top: 15rpx;
		border: 1px solid red;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		height: 60rpx;
		width: 50%;
		text-align: center;
		font-size: 30rpx;
		line-height: 60rpx;
		display: flex;
		overflow: hidden;
		background-color: #ffffff;
	}

	// .priceStyleContent>.priceStyleContent_div{
	// 	float: left;

	// }
	.priceStyleContent>.priceStyleContent_left {
		background-color: red;
		width: 50%;
		height: 60rpx;
		color: white;
		font-weight: 900;
		// border-top-left-radius:20rpx ;
	}

	.priceStyleContent>.priceStyleContent_right {
		width: 50%;
		height: 60rpx;
		color: #919296;
		text-decoration: line-through
	}

	.priceStyleContent_center {
		width: 0px;
		height: 0px;
		border-width: 60rpx 50rpx 0rpx 0rpx;
		border-style: solid;
		border-color: red transparent transparent transparent;
	}
</style>